import { FC, memo, useMemo } from 'react';
import formatMinerStatus from '@/utils/format/formatMinerStatus';
import {
  AiFillExclamationCircle,
  AiOutlineLoading,
  GiLoad,
} from 'react-icons/all';
import { DownOutlined } from '@ant-design/icons';
import { AiOutlineLock } from 'react-icons/ai';
import { MinerStatusClazzEnum, MinerStatusEnum } from '@/types/miner';
import SvgIcon from '@/components/svg-icon/SvgIcon';

interface IMinerStatusIcon {
  status: number;
}

const MinerStatusIcon: FC<IMinerStatusIcon> = (props) => {
  const { status } = props;
  const clazzName = MinerStatusClazzEnum[status] + '-text';
  const style = { fontSize: '16px' };
  const StatusIcon = useMemo(() => {
    if (status === MinerStatusEnum['warning']) {
      return <AiFillExclamationCircle className={clazzName} style={style} />;
    }
    if (
      status === MinerStatusEnum['normal'] ||
      status === MinerStatusEnum['online']
    ) {
      return <SvgIcon symbol="icon-gouxuanzhong" color="#00D97D" size={16} />;
    }

    return <AiFillExclamationCircle className={clazzName} style={style} />;
  }, []);

  return (
    <span className={`flex ai-center`}>
      {StatusIcon}
      <span style={{ marginLeft: '6px' }}>{formatMinerStatus(status)}</span>
    </span>
  );
};

export default memo(MinerStatusIcon);
